<template>
	<view class="layout">
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">情欲蓝图</block>
		</cu-custom>
		<!--  -->
		<view class="content">
			<view class="index_e_c">
				<view class="index_e_c_a" @click="curriculum_type_click(1)">
					得分
					<view class="index_e_c_a_a" v-if="curriculum_type==1"></view>
				</view>
				<view class="index_e_c_a" @click="curriculum_type_click(2)">
					解读
					<view class="index_e_c_a_a" v-if="curriculum_type==2"></view>
				</view>
			</view>
			<!-- 东西 -->
			<view class="table" v-if="curriculum_type==1">
				<view class="table-header">
					<view class="table-cell empty"></view>
					<view class="table-cell">能量</view>
					<view class="table-cell">感官</view>
					<view class="table-cell">多变</view>
					<view class="table-cell">性爱</view>
					<view class="table-cell">BDSM</view>
				</view>
				<view class="table-row">
					<view class="table-cell title">得分</view>
					<view class="table-cell">{{selfzi[0]}}</view>
					<view class="table-cell">{{selfzi[1]}}</view>
					<view class="table-cell">{{selfzi[2]}}</view>
					<view class="table-cell">{{selfzi[3]}}</view>
					<view class="table-cell">{{selfzi[4]}}</view>
				</view>
				<view class="table-row">
					<view class="table-cell title">标准分</view>
					<view class="table-cell">{{avgzi[0]}}</view>
					<view class="table-cell">{{avgzi[1]}}</view>
					<view class="table-cell">{{avgzi[2]}}</view>
					<view class="table-cell">{{avgzi[3]}}</view>
					<view class="table-cell">{{avgzi[4]}}</view>
				</view>
			</view>


			<view class="charts-box" v-if="curriculum_type==1">
				<qiun-data-charts type="radar" :chartData="chartData" :opts="opts" />
			</view>
			
			<!-- 解答 -->
			<view class="talkbox" v-if="curriculum_type==2">
				贺卡就是觉得看哈空间上的卡号是空间打开按时打卡还是觉得哈空间上的卡号是可见的·1看见客户裤卷很快就会裤卷和客家话就贺卡就和客家话裤卷看卷和看贺卡就和客家话客家话
			</view>
			
			
			
			
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				curriculum_type: 1,
				chartData: {},
				avgzi:[],
				selfzi:[],
				talkbox:'',
				opts: {
					color: ["#29183f", "#cc8ebd"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#762382",
							gridCount: 3,
							opacity: 0.5,
							max: 100,
							labelShow: true,
							border: true
						}
					}
				},
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["能量", "感官", "多变", "性爱", "BDSM"],
						series: [{
								name: "平均值",
								data: [95, 95, 95, 95, 95]
							},
							{
								name: "你的值",
								data: [52, 76, 87, 68, 86]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
					this.selfzi = this.chartData.series[1].data;
					this.avgzi = this.chartData.series[0].data;
					console.log("得到",this.selfzi);
				}, 500);
			},
			curriculum_type_click(e){
				this.curriculum_type=e;
				// if(e==1){
				// 	this.curriculum_list=this.curriculum_sp;
				// }else{
				// 	this.curriculum_list=this.curriculum_xx;
				// }
				// this.currentCurriculum=0;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.layout {
		background: #120517;
		// height: calc();
		height: 130vh;
		position: relative;

		.content {
			width: 710rpx;
			height: auto;
			// border: 1px solid red;
			margin: 50rpx 20rpx 0 20rpx;
			border-radius: 20rpx;
			box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);

			.index_e_c {
				overflow: hidden;
				margin: auto;
				margin-top: 80rpx;
				width: 500rpx;

				.index_e_c_a {
					margin: 30rpx 0 0 0;
					width: 50%;
					float: left;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #cc8ebd;
					text-align: center;
					position: relative;

					.index_e_c_a_a {
						width: 83rpx;
						height: 10rpx;
						background: #cc8ebd;
						border-radius: 5rpx;
						opacity: 0.2;
						position: absolute;
						bottom: 0;
						left: 50%;
						margin-left: -40rpx;
					}
				}
			}

			// 表格
			.table {
				// border: 1px solid #cc8ebd;
				border-radius: 8px;
				overflow: hidden;
				width: 680;
				margin: 70rpx 15rpx 0 15rpx;
			}

			.table-header {
				// height: 50rpx;
				color: #ffffff;
				display: flex;
				// background-color: #e0e0e0;
				font-weight: bold;
				// border-bottom: 1px solid #cc8ebd;
				/* 下间隔线 */
			}

			.table-row {
				display: flex;
				// border-top: 1px solid #cc8ebd;
				/* 上间隔线 */
			}

			.table-cell {
				color: #ffffff;
				flex: 1;
				padding: 10px;
				text-align: center;
			}

			.empty {
				flex: 1;
				/* 占位单元格 */
			}

			.title {
				color: #ffffff;
				font-weight: bold;
				font-size: 26rpx;
			}

			.charts-box {
				margin: 70rpx 0 0 0;
				width: 710rpx;
				height: 600rpx;
				// border: 1px solid red;
			}
			
			.talkbox {
				width: 650rpx;
				height: auto;
				margin: 100rpx 30rpx 0 30rpx;
				padding-bottom: 30rpx;
				// border: 1px solid red;
				color: #ffffff;
				font-size: 26rpx;
				font-family: sans-serif;
			}
		}
	}
</style>